<template>
	<div class="comment-vue">
		<!-- 评论列表 -->
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad"
			class="comment-box"
		>
			<!-- 每一项评论 -->
			<van-cell v-for="item in comment" :key="item.com_id" class="comment-item">
				<div class="top">
					<!-- 头像 -->
					<van-image round fit="cover" :src="item.aut_photo" />
					<!-- 个人信息 -->
					<div class="info">
						<span>{{ item.aut_name }}</span>
						<p>{{ item.content }}</p>
						<span class="reply">
							<span>{{ item.pubdate | relativeTime }}</span>
							<van-button @click="replyComment(item)" plain size="mini"
								>回复({{ item.reply_count }})
							</van-button>
						</span>
					</div>
					<!-- 爱心图标 -->
					<van-icon name="like-o" />
				</div>
			</van-cell>
		</van-list>

		<!-- 发表评论 -->
		<van-field v-model="content" center clearable placeholder="请输入评论内容">
			<template #button>
				<van-button @click="sendCom" size="small" type="info">评论</van-button>
			</template>
		</van-field>

		<!-- 回复评论 -->
		<van-action-sheet v-model="replyShow" title="发表回复">
			<div class="comment-box">
				<!-- 评论 -->
				<van-cell class="comment-item">
					<div class="top">
						<van-image round fit="cover" :src="singleComment.aut_photo" />
						<div class="info">
							<span>{{ singleComment.aut_name }}</span>
							<p>{{ singleComment.content }}</p>
							<span class="reply">
								<span>{{ singleComment.pubdate | relativeTime }}</span>
							</span>
						</div>
					</div>
				</van-cell>
			</div>
			<!-- 回复列表 -->
			<van-divider>回复列表</van-divider>
			<!-- 每一项回复 -->
			<van-cell-group class="comment-box">
				<van-cell v-for="item in reply" :key="item.com_id" class="comment-item">
					<div class="top">
						<van-image round fit="cover" :src="item.aut_photo" />
						<div class="info">
							<span>{{ item.aut_name }}</span>
							<p>{{ item.content }}</p>
							<span class="reply">
								<span>{{ item.pubdate | relativeTime }}</span>
							</span>
						</div>
					</div>
				</van-cell>
			</van-cell-group>
			<!-- 发表回复 -->
			<van-field v-model="replyCon" placeholder="请输入评论内容">
				<template #button>
					<van-button @click="sendReply()" size="small" type="info"
						>评论</van-button
					>
				</template>
			</van-field>
		</van-action-sheet>
	</div>
</template>

<script>
import { getCommentAPI, sendCommentAPI } from "@/api/comment";
export default {
	data() {
		return {
			comment: [],
			singleComment: {},
			reply: [],
			finished: false,
			loading: false,
			lastId: "", // 每次加载评论的最后一条评论id
			replyId: "", //
			content: "", // 发送评论输入框内容
			replyCon: "", // 回复评论内容
			replyShow: false, // 控制回复弹出去
		};
	},
	methods: {
		// 组件滚动到底部，调用onLoad（组件进去就为空默认调用一次）
		async onLoad() {
			// 获取文章评论
			const res = await getCommentAPI({
				type: "a",
				source: this.$route.query.id,
				offset: this.lastId,
			});
			this.lastId = res.data.last_id;
			this.comment.push(...res.data.results);
			// 加载状态结束
			this.loading = false;
			// 数据全部加载完成
			if (this.lastId == null) {
				this.finished = true;
			}
		},
		// 获取评论回复
		async replyComment(item) {
			this.replyShow = true;
			this.singleComment = item;
			const res = await getCommentAPI({
				type: "c",
				source: item.com_id,
				// offset: this.replyId,
			});
			// console.log(res);
			// this.replyId = res.data.last_id;
			this.reply = res.data.results;
		},
		// 发表评论
		async sendCom() {
			if (this.content == "") return this.$toast("请输入内容");
			const res = await sendCommentAPI({
				target: this.$route.query.id,
				content: this.content,
			});
			this.comment.unshift(res.data.new_obj);
			this.$toast("发表评论成功");
			this.content = "";
		},
		// 发布回复
		async sendReply() {
			if (this.replyCon == "") return this.$toast("请输入内容");
			const res = await sendCommentAPI({
				target: this.singleComment.com_id,
				content: this.replyCon,
				art_id: this.$route.query.id,
			});
			this.reply.unshift(res.data.new_obj);
			this.singleComment.reply_count++;
			this.replyCon = "";
		},
	},
};
</script>

<style lang='less' scoped>
// ----------底部评论-----------
.comment-box {
	margin-bottom: 50px;
	.comment-item {
		.top {
			display: flex;
			.van-image {
				width: 40px;
				height: 40px;
			}
		}
		.info {
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			.reply {
				margin-top: 5px;
				display: flex;
				align-items: center;
				& > span:nth-child(1) {
					color: #808080;
					font-size: 12px;
					margin-right: 5px;
				}
			}
		}
		.van-icon {
			position: absolute;
			right: 10px;
		}
	}
}

// ----------发表评论-----------
.van-field {
	position: fixed;
	bottom: 0;
}
</style>